<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${title} + '!'"></title>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="dm/lib/jquery/jquery.js"></script>
    <script src="/js/jquery.util.Ajax.httpRequest.js"></script>
</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<div>
    <div>
        <labal>连接用户[本用户ID]</labal>
        <input type="text" id="user"/>
        <button id="connect" onclick="connect();">Connect</button>

    </div>

    <div>
        <labal>取消连接</labal>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>

    <div id="conversationDiv">
        <labal>发送消息</labal>
        <div>
            <labal>内容</labal>
            <input type="text" id="content"/>
        </div>
        <div>
            <labal>发给谁[目标用户ID]</labal>
            <input type="text" id="to"/>
        </div>
        <button id="sendMsg" onclick="sendMsg();">发送消息[一对一]</button>

    </div>
    <div>
        <labal>接收到的消息:</labal>
        <p id="responseData"></p>

    </div>
</div>

<script type="text/javascript" th:inline="javascript">
    var stompClient = null;

    function setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById("disconnect").disabled = !connected;
        $("#response").html();
    }

    function connect() {
        var socket = new SockJS(window.location.href.split("/one-to-one-chat.html")[0] + [[${endpointUser}]]);
        stompClient = Stomp.over(socket);
        // stompClient.heartbeat.outgoing = 20000;
        // client will send heartbeats every 20000ms
        // stompClient.heartbeat.incoming = 0;

        //模拟使用认证token -> 'websocketAccessToken': 'HWPO325J9814GBHJF933' 见：com.tgz.websocket.WebSocketConfig#configureClientInboundChannel()
        stompClient.connect({'websocketAccessToken': 'HWPO325J9814GBHJF933'}, function (frame) {
            setConnected(true);
            console.log('Connected: ' + frame);
            //监听[本用户ID]
            stompClient.subscribe([[${topicUser}]]+'/' + document.getElementById('user').value + [[${topicUserChannel}]], function (response) {
                var messageEntity = JSON.parse(response.body)
                console.log(messageEntity)

                var to =  messageEntity.to//接收人
                var form =  messageEntity.form//发送人
                var content =  messageEntity.content//内容

                var responseData = document.getElementById('responseData');
                var p = document.createElement('p');
                p.style.wordWrap = 'break-word';
                p.appendChild(document.createTextNode(content + "[来源："+form+"]"));
                responseData.appendChild(p);
            });


        });

    }

    function disconnect() {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");

    }

    function sendMsg() {
        var content = document.getElementById('content').value;
        //[目标用户ID]
        var to = document.getElementById('to').value;
        //[本用户ID]
        var from = document.getElementById('user').value;
        // $.ajax({
        //     url:"/bscreenonetoone/pushToOne",
        //     type:"post",
        //     async:true,
        //     contentType: "application/json; charset=utf-8",
        //     data:JSON.stringify({
        //         'content': content,
        //         'to': to,
        //         'form': from
        //     }),
        //     success :function(result){
        //         console.log(result);
        //     },
        //     error:function(err){
        //         console.log(result);
        //     }});

        //stompClient直接发送消息，不走http中转 : /websocketClientDirectorPushToOne
        //模拟使用认证token -> 'websocketAccessToken': 'HWPO325J9814GBHJF933' 见：com.tgz.websocket.WebSocketConfig#configureClientInboundChannel()
        stompClient.send("/websocketClientDirectorPushToOne", {'websocketAccessToken': 'HWPO325J9814GBHJF933'}, JSON.stringify({
            'content': content,
            'to': to,
            'form': from
        }));
    }
</script>

</body>
</html>